<template>
    <div>
        <div class="share-to">
            <div class="search-bx">
                <form @submit.prevent="()=>{return false;}">
                    <input type="text" placeholder="搜索好友" />
                </form>
            </div>
            <div class="share-tit">
                分享好友
            </div>
            <div class="friend-wrap">
                <div class="friends">
                    <div class="friend-item" v-for="i in 8" :key="i">
                        <div class="left">
                            <span class="img-box">
                                <img loading="lazy" src="https://img.gameui.net/avatar-54-45690b@1x36.webp" alt="">
                            </span>
                            <span class="name">小熊猫欢乐</span>
                        </div>
                        <a class="follow-btn">分享</a>
                    </div>
                </div>
            </div>
            <div class="other-share">
                其他分享 <div class="shares"><a class="weixin"></a><a class="weibo"></a><a class="link"></a><a class="qrcode"></a></div>
            </div>
        </div>
        <div class="modal-mask"  @click="handleClose">

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        handleClose(){
            this.$emit('close')
        }
    }
}
</script>

<style scoped lang="less">
.share-to{
    position:absolute;
    width:360px;
    border-radius:8px;
    background:#1C1C1E;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
    z-index:112;
    bottom:60px;
    right:100px;
    cursor:default;
    padding:26px 29px;
    .search-bx{
        // position: sticky;
        // top:20px;
        width: 100%;
        width: 100%;
        margin-bottom:30px;
        // max-width:892px;
        .cancel-search{
            background:url('../../assets/pro/cancel_search.svg');
            width:20px;height:20px;
            position: absolute;
            top:14px;
            right:70px;
        }
        form {
            display: flex;
            align-items: center;
            overflow: hidden;
            height: 47px;
            background-image: url('../../assets/pro/header/search_icon.svg');
            background-repeat: no-repeat;
            background-position: 13px center;

            border-radius:8px;
            background-color: #242327;
            padding-left:33px;
            input{
                height:26px;
                background-color: #242327;
                // color:#848393;
                border: none;
                padding-left: 15px;
                color: #fff;
                width: 100%;
                font-size: 14px;
            }
        }
    }
    .share-tit{
        color:#969696;
        font-size:14px;
        margin-top:15px;
    }
    .friend-wrap{
        
    .friends{
        max-height:280px;
        overflow-y:auto;
        padding-right:20px;
         /*滚动条整体部分,必须要设置*/
            &::-webkit-scrollbar{
              width: 3px;
              height: 8px;
              background-color: transparent;
            }
            /*滚动条的轨道*/
            &::-webkit-scrollbar-track{
              background-color: transparent;
            }
            /*滚动条的滑块按钮*/
            &::-webkit-scrollbar-thumb{
              border-radius: 3px;
              background-color: #626262;
            }
            /*滚动条的上下两端的按钮*/
            &::-webkit-scrollbar-button{
              height: 0;
            }
            
            /* 两个滚动条的交汇处 */
            &::-webkit-scrollbar-corner{
              background-color: transparent;
            }
        .friend-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top:20px;
            .left{
                display: flex;
                align-items: center;
                .img-box{
                    width:48px;height:48px;
                    border-radius:48px;
                    overflow: hidden;
                    margin-right:20px;
                    img{
                        width:100%;height:100%;
                        object-fit: cover;
                    }
                }
                .name{
                    
                }
            }
            .follow-btn{
                line-height:36px;
                width:66px;
                background:#11CCB1;
                color:#fff;
                border-radius:8px;
                font-size:16px;
                font-weight:500;
                text-align: center;
            }
        }
    }
    }
    .other-share{
        border-top:1px solid #323232;
        margin-top:15px;
        padding-top:11px;
        color:#969696;
        font-size:14px;
        .shares{
            .weixin{

            }
            .weibo{

            }
            .link{

            }
            .qrcode{

            }
        }
    }
}































</style>